
.header-bg {
    background: url("../../images/banner_bg.png") no-repeat center/cover transparent;
    height: 7.5rem;
    overflow: hidden;
    .title {
        margin-top: 2.375rem;
        color: #fff;
        font-size: 1.0625rem;
        text-align: center;
        font-weight: 400;
    }

    .calend-wrap {
        border: 1px solid #fff;
        border-radius: 0.25rem;
        color: #fff;
        height: 1.875rem;
        line-height: 1.875rem;
        margin: 0.75rem 5.9375rem;
        display: flex;
        text-align: center;

        .left {
            position: relative;
            flex: 1;

            &:after {
                content: '';
                height: auto;
                width: 0.0625rem;
                background: #fff;
                position: absolute;
                right: 0;
                top: 2px;
                bottom: 2px;
            }
        }

        .right {
            width: 3rem;
            display: flex;
            align-items: center;
            justify-content: center;

            .date-icon {
                background: url("../../images/date.png")no-repeat center/cover transparent;
                display: inline-block;
                width: 1.125rem;
                height: 1.0625rem;
            }
        }

    }
}


.content {
    background: #f5f5f5;
    padding-bottom: 2.6rem;

    .tab {
        height: 2.625rem;
        display: flex;
    }
}

.tab li {
    flex: 1;
    display: flex;
    background: #fff;
}

.tab .title {
    color: #999999;
    font-size: 0.875rem;
    border-bottom: 1px solid #fff;
    width: 5.75rem;
    margin: 0 auto;
    flex: 1;
    text-align: center;
    line-height: 2.6rem;
}

.tab .active {
    color: #ff7700;
    font-size: 0.9375rem;
    font-weight: bold;
    position: relative;
}

.tab .active:before {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    background: #ff7700;
    width: 5.75rem;
    height: 0.1875rem;
}

.month-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 0.9375rem;
    margin: 0.9375rem;

    .item {
        height: 3.125rem;
        display: flex;
        flex-flow: column;
        border-radius: 0 0 0.25rem 0.25rem;
        // border-radius: 0.25rem;
        // border: 0.0625rem solid #fff;
        text-align: center;
        overflow: hidden;

    }

    .up {
        background: #fff;
        border-radius: 0.25rem 0.25rem 0 0;
        height: 2.125rem;
        font-size: 1.125rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0.0625rem solid #fff;
        border-bottom-width: 0;

        .text {
            font-size: 0.75rem;
            padding: 0.125rem 0.125rem 0;
        }
    }

    .down {
        flex: 1;
        font-size: 0.75rem;
        line-height: 1.0rem;
        background: #d6d6d6;
        color: #fff;
    }

    .active {
        border-color: #ff7700;

        .up {
            border: 0.0625rem solid #ff7700;
            border-bottom-width: 0;
            color: #ff7700;
            background: #fff7f0;
        }

        .down {
            color: #fff;
            background: #ff7700;
        }
    }
}



.calend-title {
    background: #fff;
    height: 2.5rem;
    line-height: 2.5rem;
    padding-left: 0.9375rem;
}

.calend-title .calend-icon {
    display: inline-block;
    background: url("../../images/calend-icon.png")no-repeat center/cover transparent;
    width: 1.0625rem;
    height: 1.25rem;
    vertical-align: text-bottom;
}

.calend-title .calend-text {
    padding: 0 5px;
    color: #ff7700;
    font-size: 0.875rem;
    font-weight: bold;
}

.day-grid {
    background: #fff;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-row-gap: 0.9375rem;
    padding: 0.9375rem 0;
    margin-bottom: 0.9375rem;

    .item {
        height: 2.5rem;
        background: #fff;
        display: flex;
        flex-flow: column;
        text-align: center;
    }

    .up {
        color: #333333;
        height: 2.125rem;
        font-size: 0.9375rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .down {
        flex: 1;
        font-size: 0.6875rem;
        line-height: 1.0rem;
        color: #999999;
    }


    .active {
        border: 0.0625rem solid #ff7700;
        border-radius:0.25rem;
        overflow: hidden; 
        background: #fff7f0;
        .up {
            color: #ff7700;
        }

        .down {
            color: #f00;
            font-weight: bold;
        }
    }
}



.chart-title {
    background: #fff;
    height: 2.5rem;
    line-height: 2.5rem;
    padding-left: 0.9375rem;
}

.chart-title .chart-icon {
    display: inline-block;
    background: url("../../images/chart-icon.png")no-repeat center/cover transparent;
    width: 1.0625rem;
    height: 1.25rem;
    vertical-align: text-bottom;
}

.chart-title .chart-text {
    padding: 0 5px;
    color: #ff7700;
    font-size: 0.875rem;
    font-weight: bold;
}